<template>
  <div class="pufa_page">
    <Menus title="普法动态">
      <a @click="goback" href="javascript:void(0)" v-if="isPost">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhui.png" alt="返回">
        </div>
        <span>返回</span>
      </a>
      <router-link to="/" v-if="isPost">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhuishouye.png" alt="返回首页">
        </div>
        <span>返回首页</span>
      </router-link>
    </Menus>
    <template v-if="!isPost">
      <div class="list">
        <ul>
          <li v-for="(item,index) in list" :key="'key-list-item-'+index">
            <a href="javascript:void(0)" @click="showPost(item.id)">
              <div class="article">
                <h2 class="title">{{item.title}}</h2>
                <span class="intro">
                  <span>{{item.diagram_id | name}}</span>
                  <span>{{item.date}}</span>
                </span>
              </div>
              <div class="imgs" :style="`background-image:url(https://yn.12348.laway.cn${item.img[0]})`" v-if="item.img.length"></div>
            </a>
          </li>
        </ul>
        <div class="foot">
          <div class="tip" v-if="pagemax">已经全部加载</div>
          <div class="more-link" v-else>
            <a href="javascript:void(0)" @click="loadMore()">加载更多</a>
          </div>
        </div>
      </div>
    </template>
    <div class="pufa_detail" v-if="isPost">
      <div class="main">
        <div class="title">
          <h1>{{post.title}}</h1>
          <span class="time">发布时间：{{post.post_time}}</span>
        </div>
        <div class="main_text" v-html="article_img(post.content)">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Menus from '../components/Menu'
import typename from '../datas/typename'
import pufa from '../datas/pufa'

export default {
  data() {
    return {
      id: pufa[0].id,
      list: [],
      page: 1,
      pagemax: 0,
      isPost: false,
      post: '',
      scrollTop: 0
    }
  },
  methods: {
    goback() {
      this.isPost = false
      setTimeout(() => {
        this.$scrollTo(this.scrollTop)
      }, 0)
    },
    article_img(html) {
      if (!html.includes('src="https://yn.12348.laway.cn/')) {
        // eslint-disable-line
        let dd = html.replace(/src="/g, 'src="https://yn.12348.laway.cn/') // eslint-disable-line
        dd = dd.replace(/background=\"\/image\/xxd.jpg\"/g, '') // eslint-disable-line
        return dd
      } else {
        return html
      }
    },
    async showPost(id) {
      const { result } = await this.$get('postnews/view/?post_id=' + id, this)
      this.scrollTop = document.documentElement.scrollTop
      this.post = result
      this.isPost = true
      this.$scrollTo(0)
    },
    async loadMore() {
      if (this.pagemax) return
      this.getList(this.page + 1)
    },

    async getList(page) {
      var web_code = this.$root.config.web_code
      const { result } = await this.$get(
        'postnews/list/?code=' + web_code + '&page=' + page,
        this
      )
      this.page = page
      this.list.push(...result.items)
      this.pagemax = result.items.length > 4 ? 0 : 1
    }
  },
  filters: {
    name(d) {
      return typename[d]
    }
  },
  async mounted() {
    await this.getList(this.page)
  },
  components: {
    Menus
  }
}
</script>
<style lang="scss" scoped>
.pufa_page {
  padding-top: 160px;
  background: #fff;
  .list {
    background: #fff;
    padding-top: 0;
    ul {
      display: block;

      padding: 0;
      li {
        list-style: none;
        border-bottom: 1px solid #eee;
        a {
          width: 1200px;
          margin: 0 auto;
          display: flex;
          color: #333;
          padding: 0.35rem 0;
        }
        .imgs {
          width: 2.8rem;
          height: 1.5rem;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
        }

        .article {
          width: 9.2rem;
          .title {
            font-size: 0.24rem;
            padding-right: 0.5rem;
            font-weight: normal;
            line-height: 1.6;
          }
          .intro {
            font-size: 0.18rem;
            color: #666;
            line-height: 0.5rem;
            span {
              padding-right: 0.2rem;
            }
          }
        }
      }
    }
    .foot {
      padding: 0.6rem 0;
      font-size: 0.2rem;
      text-align: center;
      .tip {
        color: #666;
      }
      .more-link a {
        display: block;
        width: 2rem;
        height: 0.66rem;
        line-height: 0.66rem;
        margin: 0 auto;
        border: 1px solid #ccc;
        color: #666;
        background: #fff;
      }
    }
  }
}

.pufa_detail {
  .main {
    margin: 0 auto;
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #eee;
      margin: 0 auto;
      padding: 0.5rem 0;
      .article_type {
        display: block;
        font-size: 0.18rem;
        color: #333;
        margin: 0 auto 0.35rem;
        text-align: center;
      }
      h1 {
        width: 10.5rem;
        font-size: 0.36rem;
        text-align: center;
        color: #333;
        font-weight: normal;
        margin: 0 0 0.2rem;
      }
      .time {
        font-size: 0.14rem;
        color: #aaa;
      }
    }
  }
  .main_text {
    padding: 0.5rem 0 1rem;
    width: 10rem;
    margin: 0 auto;
    font-size: 0.2rem;
    line-height: 1.8;
    p {
      color: #7a7a7a;
      margin: 0 0 0.25rem;
    }
    img {
      display: block;
      background: #ddd;
      margin: 0 auto 0.2rem;
      text-align: center;
    }
  }
}

@media screen and (orientation: portrait) {
  .pufa_page {
    background: none;
    .list {
      background: none;
      ul {
        margin: 0.25rem;
        li {
          background: #fff;
          margin-bottom: 0.2rem;
          border-radius: 0.1rem;
          border-bottom: 0;
          .article {
            margin: 0 0 0 0.5rem;
          }
          .imgs {
            margin: 0 0.5rem 0 0;
          }
          a {
            width: 100%;
          }
        }
      }
    }
  }
  .pufa_detail {
    background: #fff;
    margin: 0.5rem;
    border-radius: 0.1rem;
    box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
    .main_text {
      width: 100%;
      padding: 0.5rem 0.5rem 1rem;
    }
    .main {
      .title {
        margin: 0 0.5rem;
        background: #fff;
        border-bottom: 1px solid #ddd;
        h1{
          width:auto;
        }
      }
    }
  }
}
</style>
